<template>
  <div class="ds-content">
    <div class="tree-wrapper">
      <el-tree
        :data="deptTree.treeData"
        :props="deptTree.defaultProps"
        :default-expand-all=true
        :highlight-current=true
        :expand-on-click-node=false
        node-key="id"
        ref="deptTree"
        @node-click="nodeClick">
      </el-tree>
    </div>

    <div class="main-wrapper">
      <!-- 搜索 -->
      <el-form :inline=true class="query-box">
        <el-form-item label="书名">
          <el-input v-model="queryForm.bookName" placeholder="请输入书名" class="handle-input"></el-input>
        </el-form-item>
        <el-form-item label="作者">
          <el-input v-model="queryForm.author" placeholder="请输入作者" class="handle-input"></el-input>
        </el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
      </el-form>
      <div class="option-box">
        <el-button type="primary" v-has="'book:add'" @click="addBook">添加</el-button>
      </div>

      <el-table :data="tableData" stripe style="width: 100%" ref="multipleTable"
        v-loading="tableLoading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading">
        <el-table-column type="selection" />
        <el-table-column prop="bookName" label="书名" />
        <el-table-column prop="isbn" label="序列号" />
        <el-table-column prop="author" label="作者" />
        <el-table-column prop="publisher" label="出版商" />
        <el-table-column prop="publishDate" label="出版时间" />
        <el-table-column prop="deptName" label="所属部门" />
        <el-table-column prop="price" label="价格" />
        <el-table-column prop="categoryName" label="分类名称" />
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button type="text" v-has="'book:update'" @click="editBook(scope.$index, scope.row)">编辑</el-button>
            <el-button type="text" class="text-button-del" v-has="'book:delete'" @click="delBook(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination @current-change="pageChange" layout="prev, pager, next"
          :current-page="queryForm.pageNum" :page-size="queryForm.pageSize" :total="totalNum">
        </el-pagination>
      </div>
    </div>

    <!--dialog弹窗-->
    <el-dialog :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="680px"
      :modal-append-to-body=false
      :close-on-click-modal=false
      :close-on-press-escape=false>
      <el-form ref="bookForm" :model="bookForm" :inline=true :rules="bookFormRules" label-position="right" label-width="80px">
                                        <el-form-item label="书名" prop="bookName">
           <el-input v-model="bookForm.bookName" placeholder="请输入书名" class="handle-input"></el-input>
        </el-form-item>
                        <el-form-item label="序列号">
           <el-input v-model="bookForm.isbn" placeholder="请输入序列号" class="handle-input"></el-input>
        </el-form-item>
                        <el-form-item label="作者" prop="author">
           <el-input v-model="bookForm.author" placeholder="请输入作者" class="handle-input"></el-input>
        </el-form-item>
                        <el-form-item label="出版商">
           <el-input v-model="bookForm.publisher" placeholder="请输入出版商" class="handle-input"></el-input>
        </el-form-item>
                        <el-form-item label="出版时间">
            <el-date-picker align="right" v-model="bookForm.publishDate" placeholder="请选择出版时间" class="handle-date" ></el-date-picker>
        </el-form-item>
                                        <el-form-item label="所属部门" prop="deptId">
           <el-input v-model="bookForm.deptName" placeholder="请选择所属部门" class="handle-icon">
            <el-button @click="openInnerDialog" slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-form-item>
                        <el-form-item label="价格">
           <el-input v-model="bookForm.price" placeholder="请输入价格" class="handle-input"></el-input>
        </el-form-item>
                        <el-form-item label="备注">
            <el-input type="textarea" v-model="bookForm.remark" placeholder="请输入备注" class="handle-textarea"></el-input>
        </el-form-item>
                        <el-form-item label="分类名称" prop="categoryName">
            <el-select v-model="bookForm.category" placeholder="请选择分类名称" clearable class="handle-select">
              <el-option v-for="(item, index) in categorys" :key="index" :label="item.categoryName" :value="item.id"></el-option>
            </el-select>
        </el-form-item>
      </el-form>
      <!--内层弹框-->
      <el-dialog
        title="选择部门"
        :visible.sync="innerVisible"
        width="20%"
        append-to-body>
        <el-tree
                :data="deptTree.treeData"
                :props="deptTree.defaultProps"
                :default-expand-all=true
                :highlight-current=true
                :expand-on-click-node=false
                node-key="id"
                ref="subTree">
        </el-tree>
        <span slot="footer" class="dialog-footer">
          <el-button @click="innerVisible = false">取 消</el-button>
          <el-button type="primary" @click="selectDept">确 定</el-button>
        </span>
      </el-dialog>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" :loading="loading"  @click="bookFormSubmit">提 交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import * as book from '@/api/book'
import * as category from '@/api/category'
import {treeData as deptTreeData} from '@/api/dept'
import {mapGetters} from 'vuex'

export default {
  name: 'BookList',
  data () {
    return {
      deptTree: {
        defaultProps: {
          children: 'children',
          label: 'deptName'
        },
        treeData: []
      },
      queryForm: {
        bookName: '',
        author: '',
        deptId: '',
        pageNum: this.GLOBAL.pageNum,
        pageSize: this.GLOBAL.pageSize
      },
      bookForm: {
        id: '',
        bookName: '',
        isbn: '',
        author: '',
        publisher: '',
        publishDate: '',
        category: '',
        deptId: '',
        price: '',
        remark: '',
        categoryName: ''
      },
      categorys: [],
      dialogVisible: false, // 弹窗
      dialogTitle: '', // 弹窗标题
      isEdit: false, // 是否为修改操作
      innerVisible: false,
      totalNum: 1, // 总页数
      tableData: [], // 表格数据
      tableLoading: true,
      loading: false,

      bookFormRules: {
        bookName: [{required: true, message: '书名不能为空', trigger: 'blur'}],
        author: [{required: true, message: '作者不能为空', trigger: 'blur'}],
        category: [{required: true, message: '分类不能为空', trigger: 'blur'}],
        deptId: [{required: true, message: '所属部门不能为空', trigger: 'blur'}],
        categoryName: [{required: true, message: '分类名称不能为空', trigger: 'blur'}],
      }
    }
  },
  methods: {
    pageChange (val) {
      this.queryForm.pageNum = val;
      this.queryList();
    },
    transformDict (key, code) {
      return this.dictinfo(key, code);
    },
    search () {
      // this.pageNum = this.GLOBAL.pageNum;
      this.queryList();
    },
    queryList () {
      let param = this.GLOBAL.handlerQueryParam({
        ...this.queryForm
      });
      book.bookList(param).then(res => {
        this.tableData = res.data.list;
        this.totalNum = Number(res.data.total);
        this.tableLoading = false;
      });
    },
    getDeptTreeData () {
      deptTreeData().then(res => {
        this.deptTree.treeData = [...res.data];
      });
    },
    nodeClick (value, node, self) {
      this.queryForm.deptId = value.id;
      this.queryList();
    },
    openInnerDialog () {
      this.innerVisible = true;
    },
    selectDept () {
      let curNode = this.$refs.subTree.getCurrentNode();
      if (curNode) {
        if (curNode.children.length > 0) {
          this.$message({
            message: '不能选择父节点(' + curNode.deptName + ')',
            type: 'error'
          });
        } else {
          this.bookForm.deptId = curNode.id;
          this.bookForm.deptName = curNode.deptName;
          this.innerVisible = false;
        }
      }
    },
    getCategorys () {
      if (this.categorys.length > 0) {
        return;
      }
      category.queryAll().then(res => {
        this.categorys = [...res.data];
      });
    },
    addBook () {
      this.isEdit = false;
      this.dialogTitle = '添加';
      this.GLOBAL.clearObject(this.bookForm);
      this.dialogVisible = true;
      this.getCategorys();
    },
    editBook (index, row) {
      this.isEdit = true;
      this.dialogTitle = '编辑';
      this.GLOBAL.clearObject(this.bookForm);
      book.getById(row.id).then(res => {
        this.bookForm = res.data;
        this.bookForm.deptId = row.deptId;
        this.bookForm.deptName = row.deptName;

        this.bookForm.category = row.category;
        this.getCategorys();

        this.dialogVisible = true;
      });
    },
    delBook (index, row) {
      this.$confirm('确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          book.delBook(row.id)
            .then(res => {
              this.$message.success('删除成功');
              this.queryList();
            });
        })
    },
    bookFormSubmit () {
      this.$refs.bookForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          let param = this.GLOBAL.handlerQueryParam({
            ...this.bookForm
          });
          if (this.isEdit) {
            book.editBook(param)
              .then(res => {
                this.loading = false;
                this.dialogVisible = false;
                this.queryList();
              })
              .catch(() => {
                this.loading = false;
              })
          } else {
            book.addBook(param)
              .then(res => {
                this.loading = false;
                this.dialogVisible = false;
                this.queryList();
              })
              .catch(() => {
                this.loading = false;
              });
          }
        }
      });
    }
  },
  created () {
    this.queryList();
    this.getDeptTreeData();
    this.getCategorys();
  },
  computed: {
    ...mapGetters(['dictinfo', 'dictList']),
  }
}
</script>

<style lang="scss" scoped>

</style>
